<template>
  <div class="productDetail-header">
    <img
      crossOrigin="anonymous"
      src="../assets/xwimg/back.png"
      alt="header"
      class="header-img"
    />
    <span class="back-btn">
      专注进出口贸易数据统计分析，一站式数据查询平台
    </span>
  </div>

  <div class="common-layout" v-loading="isloading">
    <div class="main">
      <div class="doc-preview-wrapper">
        <!-- 头部信息 -->
        <div class="doc-header">
          <!-- <img :src="docInfo.coverPic" alt="" /> -->
          <el-icon class="close-icon" @click="closeWindow">
            <Close />
          </el-icon>
          <div class="img-wrapper">
            <img
              crossOrigin="anonymous"
              :src="docInfo.coverPic"
              alt="Document"
              class="document-image"
            />
            <div class="img-title">{{ docInfo.title }}</div>
          </div>
          <div>
            <h3>{{ docInfo.title }}</h3>
            <p class="description-text">{{ docInfo.script }}</p>
            <el-tag class="custom-tag" effect="dark">{{
              docInfo.PM_industry_1_name
            }}</el-tag>
            <span v-if="docInfo.PM_industry_2_name">-</span>
            <el-tag
              class="custom-tag"
              effect="dark"
              v-if="docInfo.PM_industry_2_name"
              >{{ docInfo.PM_industry_2_name }}</el-tag
            >
            <p class="meta">
              <span class="meta-item">
                <el-icon><User /></el-icon>
                {{ docInfo.author }}
              </span>
              <span class="meta-item">
                <el-icon><Calendar /></el-icon>
                {{
                  dayjs.unix(Number(docInfo.publishTime)).format("YYYY-MM-DD")
                }}
              </span>
              <span class="meta-item">
                <el-icon><Document /></el-icon>
                {{ docInfo.sizeNum }}页
              </span>
            </p>
          </div>
        </div>

        <!-- Tabs 切换 -->
        <div class="doc-tabs">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="报告预览" name="preview">
              <el-alert
                type="info"
                show-icon
                :closable="false"
                class="alert-box"
              >
                <template #title>
                  <div class="alert-title">
                    温馨提示：本文档最多预览
                    <span class="alert-pages">{{ totalPages }}</span>
                    页，点击购买查看全部内容
                  </div>
                </template>
              </el-alert>
              <div class="doc-content">
                <div class="pdf-viewer-container">
                  <vue-pdf-embed
                    :source="docInfo.pdfdir"
                    :page="currentPage"
                    class="pdf-container"
                  />
                </div>
                <div class="pdf-controls" v-if="totalPages > 0">
                  <el-button @click="prevPage" :disabled="currentPage <= 1">
                    上一页
                  </el-button>
                  <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                  <el-button
                    @click="nextPage"
                    :disabled="currentPage >= totalPages"
                  >
                    下一页
                  </el-button>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="报告简介" name="overview">
              <div class="document-intro-box">
                <h2 class="intro-title">
                  <span class="iconfont icon-icon_pdf"></span>
                  {{ docInfo.title }}
                </h2>
                <ul class="intro-list">
                  <li>
                    <span class="label">所属行业：</span>
                    <el-tag size="small" class="blue-tag">{{
                      docInfo.PM_industry_1_name
                    }}</el-tag>
                    <template v-if="docInfo.PM_industry_2_name">
                      <span class="divider">--</span>
                      <el-tag size="small" class="blue-tag">{{
                        docInfo.PM_industry_2_name
                      }}</el-tag>
                    </template>
                  </li>
                  <li>
                    <span class="label">发布作者/机构：</span
                    >{{ docInfo.author }}
                  </li>
                  <li>
                    <span class="label">发布时间：</span>
                    {{
                      dayjs
                        .unix(Number(docInfo.publishTime))
                        .format("YYYY-MM-DD")
                    }}
                  </li>
                  <li>
                    <span class="label">报告页码：</span>{{ docInfo.sizeNum }}页
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <el-card class="side-card">
      <div class="price-section">
        <p style="display: flex; align-items: center; gap: 10px">
          当前价格 <span class="price">￥{{ docInfo.price }}</span>
        </p>

        <el-button
          type="primary"
          @click="buyReport(docInfo)"
          class="buy-button"
          v-if="whenBuy"
          >立即购买</el-button
        >
        <el-button type="primary" @click="download" class="buy-button" v-else
          >下载报告</el-button
        >
      </div>
      <div class="purchase-info">
        <p>
          <InfoFilled class="el-icon" /> <el-button link>购买须知</el-button>
        </p>

        <ul>
          <li v-for="(item, index) in purchaseSteps" :key="index">
            <span>0{{ index + 1 }}</span>
            <strong>{{ item.title }}</strong
            >{{ item.description }}
          </li>
        </ul>
        <img
          src="../assets/xwimg/news.jpg"
          alt=""
          style="
            width: 220px;
            height: 220px;
            margin: 0 auto;
            display: block;
            margin-top: 50px;
            margin-bottom: 20px;
          "
        />
      </div>
    </el-card>

    <!-- 支付弹窗 -->
    <el-dialog
      title=""
      v-model="payVisible"
      width="600px"
      center
      style="height: 470px"
    >
      <div class="pay-modal-content">
        <h3 class="pay-title">
          钱包余额
          <span style="color: #f56c6c">¥{{ money }}</span>
        </h3>

        <el-radio-group v-model="radio1" class="pay-method-group">
          <el-radio
            label="userAcc"
            class="pay-method"
            :disabled="balanceDisabled"
          >
            <template #default>
              <el-icon class="pay-method-icon"><WalletFilled /></el-icon>
            </template>
          </el-radio>
        </el-radio-group>
        <div class="pay-method-label" v-if="balanceDisabled">
          余额不足，需充值 ¥{{
            (Number(docInfo.price) - Number(money)).toFixed(2)
          }}，
          <el-button type="text" class="recharge-link" @click="Recharge">
            去充值
          </el-button>
        </div>
        <div class="pay-method-label" v-else>
          {{ balance }}
        </div>
      </div>

      <template #footer>
        <div class="dialog-footerpay">
          <el-button
            type="primary"
            :disabled="balanceDisabled"
            @click="confirmPay"
            style="
              width: 200px;
              height: 50px;
              letter-spacing: 10px;
              font-size: 20px;
            "
          >
            确认购买
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 确认  支付弹窗 -->
    <el-dialog
      title="支付方式"
      v-model="ConfirmPayVisible"
      width="600px"
      center
    >
      <div class="pay-modal-content">
        <h3 class="pay-title">{{ payInfo.scriptTxt }}</h3>
        <div class="pay-options">
          <div
            class="qr-item"
            :class="{ selected: payMethod === 'wechat' }"
            @click="selectPay('wechat')"
          >
            <div class="qr-label">支付</div>
            <div class="qr-wrapper">
              <img :src="payInfo.wechat_qr" alt="微信二维码" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="padding: 10px; padding-bottom: 20px">
          <el-button
            type="primary"
            @click="CompletePay"
            style="
              width: 200px;
              height: 50px;
              letter-spacing: 10px;
              font-size: 20px;
            "
            >点击关闭</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 充值弹窗 -->
    <el-dialog
      title="充值"
      v-model="rechargeVisible"
      width="600px"
      style="height: 470px"
      center
    >
      <div class="pay-modal-content">
        <h3 class="pay-title">充值后可在个人中心-我的钱包中查看到充值记录</h3>
        <div class="pay-options">
          <div class="qr-item">
            <div class="qr-wrapper">
              <img :src="rechargeimg" alt="微信二维码" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div style="padding: 10px">
          <el-button
            type="primary"
            @click="rechargeOk"
            style="
              width: 200px;
              height: 50px;
              letter-spacing: 10px;
              font-size: 20px;
            "
            >充值完成</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { User, Calendar, Document, Back, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
import { reportApi } from '../api/report.js'
import VuePdfEmbed from 'vue-pdf-embed'
import dayjs from 'dayjs'
const route = useRoute()
const docInfo = ref({})
const out_no = ref('')
const whenBuy = ref(false)
const isloading = ref(true)
// PDF 相关状态
const currentPage = ref(1)
const totalPages = ref(0)
const radio1 = ref('userAcc')
const userAcc = ref(false)
const ConfirmPayVisible = ref(false)
const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  } else {
    ElMessage.warning("已达到预览上限，购买后可查看完整内容");
  }
};

const activeTab = ref("preview");  // 当前激活的 Tab
const payVisible = ref(false)
const payInfo = reactive({ wechat_qr: '', alipay_qr: '', scriptTxt: '' })
const backBtnText = "报告详情";
const purchaseSteps = [
  { title: "目标报告选择", description: "在平台上选择您需要的报告" },
  {
    title: "订单方式", description: "可在上方点击“立即购买”的按钮，直接线上付款购买。  若您有定制报告需求，可通过“公众号”联系我司商务,公众号见下图二维码(即时回复)"
  },
  {
    title: "支付完成", description: "自助下载报告：付款完成后，即可自行在当前页面下载该报告的电子版， 若有任何疑问，可通过“公众号”联系我司商务,公众号见下图二维码(即时回复)，如需开具发票，在“个人中心-我的订单”页面申请，我们会在3-7个工作日内提供电子发票。"

  }
];

const closeWindow = () => {
  window.close();
}


const money = ref('')
const balance = ref('')
const balanceDisabled = ref(false)
// 购买报告的方法
const buyReport = (docInfo) => {
  reportApi.getMyWallet().then(res => {
    const walletBalance = Number(res.data.checkAcc.accGold);
    const reportPrice = docInfo.price;
    const deficit = reportPrice - walletBalance;

    // 重置状态
    balanceDisabled.value = false;
    radio1.value = 'userAcc'; // 默认选择钱包支付

    if (walletBalance < reportPrice) {
      // 余额不足时处理
      balanceDisabled.value = true; // 禁用钱包选项
      balance.value = `余额不足，需充值 ¥${deficit.toFixed(2)},去充值`;
      rechargeparams.amount = deficit.toFixed(2)
    } else {
      balance.value = `余额充足: ¥${walletBalance.toFixed(2)}`;
    }

    payVisible.value = true;
    money.value = walletBalance.toFixed(2);

  }).catch(error => {
    ElMessage.error('获取钱包信息失败');
  });
}





const rechargeparams = reactive({
  amount: '',
  payType: 'wxpay',
  payTypeMethod: 'native'
})
const rechargeVisible = ref(false)
const rechargeimg = ref('')
// 充值
const Recharge = async () => {
  const res = await reportApi.recharge(rechargeparams)
  if (res.code === 0) {
    rechargeVisible.value = true
    rechargeimg.value = res.data.recharge.url
  } else {
    ElMessage.error(res.msg)
  }
}
const rechargeOk = async () => {
  rechargeVisible.value = false;

  // 重新查询钱包余额
  try {
    const res = await reportApi.getMyWallet();
    const walletBalance = Number(res.data.checkAcc.accGold);
    const reportPrice = docInfo.value.price;
    const deficit = reportPrice - walletBalance;

    money.value = walletBalance.toFixed(2);

    if (walletBalance < reportPrice) {
      balance.value = `余额不足，需充值 ¥${deficit.toFixed(2)},去充值`;
      rechargeparams.amount = deficit.toFixed(2);
    } else {
      balance.value = `余额充足 ¥${walletBalance.toFixed(2)}`;
      balanceDisabled.value = false; // 启用钱包支付选项
    }
  } catch (error) {
    ElMessage.error('更新钱包信息失败');
  }
}


const confirmPay = () => {
  const params = { code: route.params.code, payType: radio1.value, }
  reportApi.reportBuy(params).then(res => {
    if (res.code === 0) {
      ConfirmPayVisible.value = true
      payInfo.wechat_qr = res.data.userOrder.payPic
      payInfo.alipay_qr = res.data.userOrder.payPic
      out_no.value = res.data.userOrder.out_no
      payInfo.scriptTxt = res.data.userOrder.scriptTxt

    } else {
      ElMessage.error(res.msg)
    }
  })
}
const CompletePay = () => {
  ConfirmPayVisible.value = false;
  payVisible.value = false;
  window.location.reload();
  // reportApi.getOrderStatus({ out_no: out_no.value }).then(res => {
  //   if (res.data.checkOrder
  //     .payStatus == 0) {
  //     ElMessage.error('订单未支付成功 请确认')
  //     payVisible.value = false
  //   }
  //   else if (res.data.checkOrder
  //     .payStatus == 1) {
  //     ElMessage.success('订单支付成功 ')
  //     search()
  //     whenBuy.value = false

  //     payVisible.value = false
  //     ConfirmPayVisible.value = false
  //   }
  // })

}





// 下载报告
const download = async () => {
  try {
    const res = await reportApi.reportDownload({ code: route.params.code })
    if (res.code === 0) {
      // 创建 a 标签触发下载
      const a = document.createElement('a')
      a.href = res.data.userDown.pdfDir
      a.download = ''
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      ElMessage.success('下载开始')
    } else {
      ElMessage.error(res.msg || '下载失败')
    }
  } catch {
    ElMessage.error('下载出错')
  } finally {

  }

}


const search = async () => {
  const params = { code: route.params.code }
  await reportApi.getReportDetail(params).then(res => {
    if (res.code === 0) {
      isloading.value = false
    }
    docInfo.value = res.data.detail
    const num = Number(res.data.detail.sizeNum) || 0;

    // 计算总页数并限制最大值不超过10
    const calculatedPages = Math.ceil(num * 0.3);
    totalPages.value = calculatedPages > 10 ? 10 : calculatedPages;

    if (res.data.detail.userPayTime == 0) {
      whenBuy.value = true
    }
  })
}


onMounted(async () => {
  search()

})
</script>

<style lang="scss" scoped>
.productDetail-header {
  height: 70px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;

  .header-img {
    width: 100%;
    height: 70px;
    z-index: -1;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .back-btn {
    margin: 0 auto;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.6;

    color: #004d7d;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

    .el-icon {
      transition: transform 0.3s;
    }

    &:hover .el-icon {
      transform: translateX(-3px);
    }
  }
}

.common-layout {
  display: flex;
  align-items: stretch; // 确保子元素高度拉伸（默认值，可省略）
  justify-content: center;
  margin: 0 auto;
  height: calc(128vh - 70px);
  width: 80%;
  padding: 30px;
  box-sizing: border-box;
  gap: 24px;

  .main {
    width: 70%;
    margin-bottom: 4%;
    .doc-preview-wrapper {
      width: 95%;
      height: 100%; // 继承父容器高度
      padding: 30px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }

  .side-card {
    width: 30%;
    height: 100%;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
}

.doc-header {
  display: flex;
  gap: 15px;
  height: 17%;
  position: relative;
  .close-icon {
    position: absolute;
    top: -25px;
    right: -25px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;

    /* 四分之一圆形设计 */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 15px;
    clip-path: circle(100% at 100% 0%);
    background-color: #949597; /* 灰色背景 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 0 100%; /* 圆角效果 */

    /* 悬停效果 */
    &:hover {
      background-color: #ff4d4f; /* 悬停时变为红色 */

      box-shadow: 0 0 15px rgba(255, 77, 79, 0.4); /* 增强阴影效果 */
    }
  }
  p {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #1516188f;
  }
  .custom-tag {
    border-radius: 4px;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.2);
    color: #3498db;
    font-size: 12px;
    padding: 4px 8px;
  }
  .description-text {
    letter-spacing: 0.8px;
    line-height: 1.6;
    margin: 10px 0;
  }
  .meta {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
    color: #999;

    &-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;

      .el-icon {
        color: #151618b8;
        font-size: 16px;
        margin-right: 4px;
      }
    }
  }

  .img-wrapper {
    position: relative;

    .img-title {
      position: absolute;
      top: 25%;
      left: 45%;
      /* 先把文字中心移到容器中心 */
      transform: translate(-50%, -50%) rotate(-5deg);
      /* 文字样式 */
      font-size: 7px;
      font-weight: bold;
      font-style: italic;
      color: #ffffff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      white-space: nowrap;
      pointer-events: none;
      text-align: center;
      width: 100px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
    }
    .document-image {
      width: 120px;
      height: 175px;
      object-fit: cover;
    }
  }
}

.price-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  .price {
    font-size: 35px;
    font-weight: bold;
    color: #ff1f01;
  }
  .buy-button {
    width: 100%;
    padding: 20px;
    font-size: 22px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 10px;
    &:hover {
      background-color: #2980b9;
    }
  }
}

.purchase-info {
  p {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
    color: #666;

    .el-icon {
      color: #ffb801;
    }

    .el-button {
      padding: 0;
      color: #666;
    }
  }

  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    li {
      margin-top: 40px;
      position: relative;
      padding-left: 60px;
      margin-bottom: 40px;
      min-height: 40px;
      font-size: 16px;
      color: #1516188f;
      counter-increment: step-counter;

      /* 左侧竖线 */
      &::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 0;
        bottom: -40px; // 延长竖线到下一个项目
        width: 2px;
        background: #3498db;
      }

      /* 不同项目的竖线颜色 */
      &:nth-child(1)::before {
        background: #3498db;
      }
      &:nth-child(2)::before {
        background: #ffd700;
      }
      &:nth-child(3)::before {
        background: #52c41a;
      }

      /* 最后一个项目去掉竖线 */
      &:last-child::before {
        display: none;
      }

      span {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        color: white;
      }

      /* 不同项目的数字背景色 */
      &:nth-child(1) span {
        background: #3498db;
      }
      &:nth-child(2) span {
        background: #ffd700;
      }
      &:nth-child(3) span {
        background: #52c41a;
      }

      strong {
        display: block;
        font-size: 18px;
        color: #333;
        margin-bottom: 8px;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.document-intro-box {
  padding: 20px;
  background: #f9fafa;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;

  .intro-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;

    .iconfont {
      font-size: 20px;
      color: #ff7861;
    }
  }

  .intro-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;

    li {
      font-size: 14px;
      color: #34495e;

      .label {
        font-weight: 500;
        color: #7f8c8d;
        margin-right: 6px;
      }
    }
  }
}
.doc-content {
  height: 680px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;

  .pdf-viewer-container {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    background-color: #f5f7fa;
    padding: 20px;

    /* 添加滚动条样式 */
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
      &:hover {
        background: #a8a8a8;
      }
    }
  }

  .pdf-container {
    width: 100%;
    max-width: 800px; /* 最大宽度限制 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: white;

    /* 深度选择器修改PDF内部样式 */
    :deep(.pdf-page) {
      width: 100% !important;
      height: auto !important;
      margin: 0 auto;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      canvas {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
      }
    }
  }

  .pdf-controls {
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-top: 1px solid #ebeef5;
    position: sticky;
    bottom: 0;
    z-index: 10;

    span {
      font-size: 14px;
      color: #606266;
    }

    .el-button {
      min-width: 90px;
      padding: 8px 16px;
    }
  }
}
.pay-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}
.pay-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
}
.pay-options {
  display: flex;
  justify-content: space-around;
  gap: 24px;
}
.qr-item {
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.3s;
  text-align: center;
}
.qr-item.selected {
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.5);
}
.qr-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.qr-wrapper img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.dialog-footer {
  padding: 20px 0;
  text-align: center;
}
.dialog-footerpay {
  padding: 0px;
  text-align: center;
}
/* 调整弹窗高度，居中内容 */
.el-dialog__body {
  padding: 24px 32px;
}
.pay-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 支付方式布局 */
.pay-method-group {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 40px;
  margin-top: 16px;
}

/* 支付方式项容器：去掉原生单选圈 */
.pay-method {
  margin-top: 50px;

  text-align: center;

  &.is-checked .pay-method-icon {
    box-shadow: 0 0 15px 5px rgba(64, 158, 255, 0.5);
    border-color: #409eff;
    transform: scale(1.05);
  }
}

/* 隐藏原生的 radio 圈和 label */
.pay-method ::v-deep .el-radio__inner {
  display: none !important;
}

/* 图标外框：150px 超大尺寸 */
.pay-method-icon {
  font-size: 150px !important;
  line-height: 1;
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 12px;
  transition: all 0.3s;
  display: block;
  margin: 0 auto 8px;
}

/* 文本提示 */
.insufficient {
  color: #f56c6c;
  cursor: pointer;
  // text-decoration: underline;
  font-weight: bold;

  &:hover {
    color: #e64e4e;
    text-decoration: none;
  }
}

/* 调整支付标签样式 */
.pay-method-label {
  display: block;
  margin-top: 90px;
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 6px;
  background: #f9f9f9;
  border: 1px solid #eee;
}
/* 中心对齐整个单选组 */

/* 高亮页数为红色 */
.alert-pages {
  color: #ff4d4f;
  font-weight: bold;
}
.recharge-link {
  padding: 0;
  font-size: 15px;
  color: #409eff;
  text-decoration: underline;
  line-height: 1;
}
</style>
